<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title></title>
	<script type="text/javascript" src="../../vue/dist/vue.js"></script>
	<style type="text/css">
		.fade-enter-active, .fade-leave-active {
			transition: opacity .5s
		}
		.fade-appear, .fade-appear-to {
			width: 50px
		}
		.fade-appear-active{
			transition: width 10s
		}
		.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
			opacity: 0
		}
	</style>
</head>
<body>
<div id="app">
	<span @click="btn">toggle</span>
	<transition name="fade" appear appear-class="fade-appear" appear-active-class="fade-appear-active">
		<!-- <transition> -->
		<!-- <keep-alive> -->
			<p v-show="show">gagag</p>
			<!-- <my-component v-show="show"></my-component> -->
		<!-- </keep-alive> -->
		<!-- </transition> -->
	</transition>
</div>

<script type="text/javascript">
	Vue.component('my-component', {
		template: `<div id="sub" >
			{{text}}
		</div>`,
		data(){
			return {
				text: '子模板中的内容'
			}
		}
	});
	// Vue.component('my-component2', {
	// 	template: `<div id="sub" >
	// 		{{text}}
	// 	</div>`,
	// 	data(){
	// 		return {
	// 			text: '子模板中的内容2'
	// 		}
	// 	}
	// });
	new Vue({
		el: '#app',
		data: {
			// which: 'my-component'
			show: true
		}, 
		methods: {
			btn(){
				this.show = !this.show;
			}
		}
	});
</script>
</body>
</html>